<template>
<div>
  <el-row>
    <el-col :span="1" style="line-height: 40px">姓名:</el-col>
    <el-col :span="4">
      <el-input placeholder="员工姓名查询" v-model="selEmpName">
        <el-button slot="append" icon="el-icon-search" @click="selEmps"></el-button>
      </el-input>
    </el-col>
    <el-col :span="4" style="line-height: 40px" :offset="1">
      <el-cascader v-model="selSiteId" 
        placeholder="查询网点员工" 
        :options="allProvince" 
        filterable 
        :show-all-levels="false"
        @change="selEmps"></el-cascader>
    </el-col>
    <el-col :span="4" style="line-height: 40px" :offset="1">
      <el-select v-model="postId" placeholder="职位查询" clearable  @change="selEmps">
        <el-option
          v-for="post in this.posts"
          :key="post.postId"
          :label="post.postName"
          :value="post.postId"
          >
          <span style="float: left">{{ post.postName }}</span>
          <span style="float: right; color: #8492a6; font-size: 13px">{{ post.postExplain }}</span>
        </el-option>
      </el-select>
    </el-col>
  </el-row>
  <el-table
    :data="tableData"
    height="500"
    border
    style="width: 100%">
    <el-table-column prop="siteName" label="网点"></el-table-column>
    <el-table-column prop="empAccount" label="账号"></el-table-column>
    <el-table-column prop="empName" label="姓名"></el-table-column>
    <el-table-column prop="postName" label="职位"></el-table-column>
    <el-table-column prop="empTel" label="联系方式"></el-table-column>
  </el-table>
</div>
</template>

<script>
import {selEmp} from 'network/employee'
import {getAllPost} from 'network/post.js'

export default {
  data() {
    return {
      posts: [],
      selSiteId: '',
      selEmpName: '',
      postId: '',
      tableData: []
    }
  },
  computed: {
    allProvince() {
      let options = []
      this.$store.state.modules.proCityArea.province.forEach((pro,index) => {
        options.push({label:pro.proName,children: []})
        pro.citys.forEach((city,ind) => {
          options[index].children.push({label:city.cityName,children: []})
          city.areas.forEach((area,i) => {
            options[index].children[ind].children.push({label:area.areaName,children: []})
            area.sitetbs.forEach((site) => {
              options[index].children[ind].children[i].children.push({value:site.siteId,label:site.siteName})
            })
          })
        })
      })
      return options
    },
  },
  methods: {
    selEmps() {
      if(this.selSiteId.length < 1 && this.selEmpName == '') {
        this.$message({
          showClose: true,
          message: '请输入姓名或选择网点查询',
          type: 'warning'
        });
        return false
      }
      selEmp({empName: this.selEmpName,siteId: this.selSiteId[3],postId: this.postId}).then(res => {
        this.tableData.splice(0)
        for(let emp of res) {
          this.tableData.push({
            siteName: emp.sitetb.siteName,
            empAccount: emp.empAccount,
            empName: emp.empName,
            postName: emp.posttb.postName,
            empTel: emp.empTel
            })
        }
      }).catch(err => {
        console.log(err)
      })
    },
  },
  mounted() {
    getAllPost().then(res => {
      this.posts = res
    }).catch(err => {
      console.log(err)
    })
  }
}
</script>

<style scoped>
.el-row{
  margin-bottom: 20px;
}
</style>
